{include file="public/head"/}
<style>
  .main-content {
    margin-left: 0px;
    min-height: 80%;
  }

  .row .cf {
    margin-bottom: 10px;
  }
  .step-content{
    height:560px;
  }
</style>


<div class="main-container" id="main-container">
  <script type="text/javascript">
    try {
      ace.settings.check('main-container', 'fixed')
    } catch (e) {
    }
  </script>

  <div class="main-container-inner">
    <a class="menu-toggler" id="menu-toggler" href="#">
      <span class="menu-text"></span>
    </a>
    {include file="public/nav"/}


    <div class="main-content">
      <div class="page-content">
        <div class="row">
          <div class="well">
            <h1 class=" lighter smaller">
              <span class="blue bigger-125">
                <i class="ace-icon fa fa-car"></i>
              </span>
              车辆服务
            </h1>
            <hr>
            <div class="space"></div>

            <div class="row-fluid">
              <div class="span12">
                <div class="widget-box">
                  <div class="widget-header widget-header-blue widget-header-flat">
                    <!--<h4 class="lighter">添加工单</h4>-->
                  </div>

                  <div class="widget-body">
                    <div class="widget-main">
                      <div id="fuelux-wizard" class="row-fluid" data-target="#step-container">
                        <ul class="wizard-steps">
                          <li data-target="#step1" class="active">
                            <span class="step">1</span>
                            <span class="title">车辆信息</span>
                          </li>

                          <li data-target="#step2">
                            <span class="step">2</span>
                            <span class="title">检查项目</span>
                          </li>

                          <li data-target="#step3">
                            <span class="step">3</span>
                            <span class="title">服务项目</span>
                          </li>
                        </ul>
                      </div>

                      <hr/>
                      <div class="step-content row-fluid position-relative" id="step-container">
                        <div class="step-pane active" id="step1">
                          <!--<h3 class="lighter block green">选择或添加车辆信息</h3>-->
                          <a class="btn btn-info" href="#modal-fmCar" data-toggle="modal">
                            <i class="icon-ok bigger-110"></i>
                            添加车辆
                          </a>
                          <!--数据筛选表单-->
                          <form class="form-inline fmClientQuery-hook">
                            <input class="input-small" name="car_num" placeholder="车牌号"/>
                            <input class="input-large" name="car_type" placeholder="车型"/>
                            <input class="input-small" name="vin" placeholder="大架号"/>
                            <button type="button" class="btn btn-info btn-sm" onclick="addCar.search();">
                              <i class="fa fa-search bigger-110"></i>
                              查找
                            </button>
                            <button type="button" class="btn btn-primary btn-sm" onclick="addCar.searchNull();">
                              <i class="fa fa-remove bigger-110"></i>
                              清空
                            </button>
                          </form>
                          <!--车辆数据表-->
                          <table id="tbCar"></table>
                          <!--车辆表页码内容-->
                          <div id="tbCarPager"></div>

                          <!--添加车辆模态框-->
                          <div id="modal-fmCar" class="modal" tabindex="-1">
                            <div class="modal-dialog">
                              <div class="modal-content">
                                <div class="modal-header">
                                  <button type="button" class="close" data-dismiss="modal">&times;</button>
                                  <h4 class="blue bigger">添加车辆信息</h4>
                                </div>
                                <div class="modal-body overflow-visible">
                                  <!--添加车辆表单-->
                                  <form class="form-horizontal" id="fmClient" method="post">
                                    <input type="hidden" name="id" value="">
                                    <div class="form-group">
                                      <label class="col-sm-3 control-label no-padding-right"> 车牌号 </label>
                                      <div class="col-sm-9">
                                        <input name="car_num" placeholder="车牌号" class="col-xs-10 col-sm-5" value="">
                                        <span class="help-inline col-xs-12 col-sm-7">
                                          <span class="middle"></span>
                                        </span>
                                      </div>
                                    </div>
                                    <div class="space-4"></div>
                                    <div class="form-group">
                                      <label class="col-sm-3 control-label no-padding-right"> 车型 </label>
                                      <div class="col-sm-9">
                                        <input name="car_type" placeholder="车型" class="col-xs-10 col-sm-5" value="">
                                        <span class="help-inline col-xs-12 col-sm-7">
                                          <span class="middle"></span>
                                        </span>
                                      </div>
                                    </div>
                                    <div class="form-group">
                                      <label class="col-sm-3 control-label no-padding-right"> 大架号 </label>
                                      <div class="col-sm-9">
                                        <input name="vin" placeholder="大架号" class="col-xs-10 col-sm-5" value="">
                                        <span class="middle"></span>
                                        </span>
                                      </div>
                                    </div>
                                  </form>
                                </div>

                                <div class="modal-footer">
                                  <button class="btn btn-sm" data-dismiss="modal">
                                    <i class="icon-remove"></i>
                                    取消
                                  </button>
                                  <button class="btn btn-sm btn-primary">
                                    <i class="icon-ok"></i>
                                    保存
                                  </button>
                                </div>
                              </div>
                            </div>
                          </div>
                        </div>

                        <div class="step-pane" id="step2">
                          <form class="form-horizontal" id="fmReception" method="post">
                            <input type="hidden" name="id" value="">
                            <div class="form-group">
                              <label class="col-sm-5 control-label no-padding-right"> 空气滤芯 </label>
                              <div class="col-sm-7">
                                <div class="radio">
                                  <label>
                                    <input name="reception_id" type="radio" class="ace" value="1">
                                    <span class="lbl">OK</span>
                                  </label>&nbsp;&nbsp;
                                  <label>
                                    <input name="reception_id" type="radio" class="ace" value="1">
                                    <span class="lbl">NOT OK</span>
                                  </label>
                                </div>
                                <span class="help-inline col-xs-12 col-sm-7">
                                  <span class="middle"></span>
                                </span>
                              </div>
                            </div>
                            <div class="form-group">
                              <label class="col-sm-5 control-label no-padding-right"> 底盘悬挂 </label>
                              <div class="col-sm-7">
                                <div class="radio">
                                  <label>
                                    <input name="reception_id" type="radio" class="ace" value="1">
                                    <span class="lbl">OK</span>
                                  </label>&nbsp;&nbsp;
                                  <label>
                                    <input name="reception_id" type="radio" class="ace" value="1">
                                    <span class="lbl">NOT OK</span>
                                  </label>
                                </div>
                                <span class="help-inline col-xs-12 col-sm-7">
                                  <span class="middle"></span>
                                </span>
                              </div>
                            </div>
                            <div class="form-group">
                              <label class="col-sm-5 control-label no-padding-right"> 防冻液 </label>
                              <div class="col-sm-7">
                                <div class="radio">
                                  <label>
                                    <input name="reception_id" type="radio" class="ace" value="1">
                                    <span class="lbl">OK</span>
                                  </label>&nbsp;&nbsp;
                                  <label>
                                    <input name="reception_id" type="radio" class="ace" value="1">
                                    <span class="lbl">NOT OK</span>
                                  </label>
                                </div>
                                <span class="help-inline col-xs-12 col-sm-7">
                                  <span class="middle"></span>
                                </span>
                              </div>
                            </div>
                            <!--服务建议-->
                            <div class="form-group">
                              <label class="col-sm-5 control-label no-padding-right"> 服务建议 </label>
                              <div class="col-sm-4">
                                <textarea class="form-control" name="propose" id="" cols="30" rows="10"></textarea>
                                <span class="help-inline col-xs-12 col-sm-7">
                                  <span class="middle"></span>
                                </span>
                              </div>
                            </div>
                          </form>
                        </div>

                        <div class="step-pane" id="step3">
                          <div class="row">
                            <div class="col-sm-6">
                              <h3>待选服务项目</h3>
                              <a class="btn btn-info" href="#modal-fmGood" data-toggle="modal">
                                <i class="icon-ok bigger-110"></i>
                                添加产品
                              </a>
                              <!--添加产品模态框-->
                              <div id="modal-fmGood" class="modal" tabindex="-1">
                                <div class="modal-dialog">
                                  <div class="modal-content">
                                    <div class="modal-header">
                                      <button type="button" class="close" data-dismiss="modal">&times;</button>
                                      <h4 class="blue bigger">添加产品信息</h4>
                                    </div>
                                    <div class="modal-body overflow-visible">
                                      <!--添加客户表单-->
                                      <form class="form-horizontal" id="fmGood" method="post">
                                        <input type="hidden" name="id" value="">
                                        <div class="form-group">
                                          <label class="col-sm-3 control-label no-padding-right"> 编号 </label>
                                          <div class="col-sm-9">
                                            <input name="num" placeholder="编号" class="col-xs-10 col-sm-5" value="">
                                            <span class="help-inline col-xs-12 col-sm-7">
                                              <span class="middle"></span>
                                            </span>
                                          </div>
                                        </div>
                                        <div class="form-group">
                                          <label class="col-sm-3 control-label no-padding-right"> 名称 </label>
                                          <div class="col-sm-9">
                                            <input name="name" placeholder="名称" class="col-xs-10 col-sm-5" value="">
                                            <span class="help-inline col-xs-12 col-sm-7">
                                              <span class="middle"></span>
                                            </span>
                                          </div>
                                        </div>
                                        <div class="form-group">
                                          <label class="col-sm-3 control-label no-padding-right"> 价格 </label>
                                          <div class="col-sm-9">
                                            <input name="price" placeholder="价格" class="col-xs-10 col-sm-5" value="">
                                            <span class="help-inline col-xs-12 col-sm-7">
                                              <span class="middle"></span>
                                            </span>
                                          </div>
                                        </div>
                                        <div class="space-4"></div>
                                        <div class="form-group">
                                          <label class="col-sm-3 control-label no-padding-right"> 库存 </label>
                                          <div class="col-sm-9">
                                            <input name="address" placeholder="库存" class="col-xs-10 col-sm-5" value="">
                                            <span class="help-inline col-xs-12 col-sm-7">
                                              <span class="middle"></span>
                                            </span>
                                          </div>
                                        </div>
                                        <div class="form-group">
                                          <label class="col-sm-3 control-label no-padding-right"> 电话 </label>
                                          <div class="col-sm-9">
                                            <input name="phone" placeholder="电话" class="col-xs-10 col-sm-5" value="">
                                            <span class="help-inline col-xs-12 col-sm-7">
                                              <span class="middle"></span>
                                            </span>
                                          </div>
                                        </div>
                                      </form>
                                    </div>

                                    <div class="modal-footer">
                                      <button class="btn btn-sm" data-dismiss="modal">
                                        <i class="icon-remove"></i>
                                        取消
                                      </button>
                                      <button class="btn btn-sm btn-primary">
                                        <i class="icon-ok"></i>
                                        保存
                                      </button>
                                    </div>
                                  </div>
                                </div>
                              </div>

                              <table id="tbGood"></table>
                              <div id="tbGoodPager"></div>
                            </div>
                            <div class="col-sm-6">
                              <h3>选中的服务项目</h3>

                            </div>
                          </div>

                        </div>
                      </div>
                      <hr/>
                      <div class="row-fluid wizard-actions">
                        <button class="btn btn-prev">
                          <i class="icon-arrow-left"></i>
                          Prev
                        </button>

                        <button class="btn btn-success btn-next" data-last="Finish ">
                          Next
                          <i class="icon-arrow-right icon-on-right"></i>
                        </button>
                      </div>
                    </div><!-- /widget-main -->
                  </div><!-- /widget-body -->
                </div>
              </div>
            </div>
            <hr>
            <div class="space"></div>
          </div>
        </div><!-- /.row -->
      </div><!-- /.page-content -->
    </div><!-- /.main-content -->

  </div><!-- /.main-container-inner -->

  <a href="#" id="btn-scroll-up" class="btn-scroll-up btn btn-sm btn-inverse">
    <i class="icon-double-angle-up icon-only bigger-110"></i>
  </a>
</div>
<!-- /.main-container -->
{include file="public/footerjs"/}
<script src="__ADMIN__/ace/js/fuelux/fuelux.wizard.min.js"></script>
<script src="__ADMIN__/ace/js/bootbox.min.js"></script>

<script>
  $(function () {
    var $validation = false;
    $('#fuelux-wizard').ace_wizard().on('change', function (e, info) {
      if (info.step == 1 && $validation) {
        if (!$('#validation-form').valid()) return false;
      }
    }).on('finished', function (e) {
      bootbox.dialog({
        message: "Thank you! Your information was successfully saved!",
        buttons: {
          "success": {
            "label": "OK",
            "className": "btn-sm btn-primary"
          }
        }
      });
    }).on('stepclick', function (e) {
      //return false;//prevent clicking on steps
    });

    //加载数据
    var $tbCar = $('#tbCar'), $pager = $('#tbCarPager');
    var $tbGood = $('#tbGood'), $pager = $('#tbGoodPager');
    $tbCar.jqGrid({
      url: "{:url('car/getCar')}",
      datatype: 'json',
      mttype: 'post',
      colNames: ['车牌号', '车型', '大架号', '操作'],
      colModel: [
        {name: 'car_num', index: 'car_num', width: '100', align: 'center'},
        {name: 'car_type', index: 'car_type', width: '100', align: 'center'},
        {name: 'vin', index: 'vin', width: '100', align: 'center'},
        {
          name: 'car_num', index: 'car_num', width: '100', align: 'center',
          formatter: function (value, options, obj) {
            return '<a style="cursor:pointer;" onclick="">选择</a>';
          }
        },
      ],
      height: 'auto',
      pager: '#tbCarPager',
      viewrecords: true,
      rowNum: 10,
      rowList: [10, 20, 40],
      autowidth: true
    });

    $tbGood.jqGrid({
      url: "{:url('good/getGood')}",
      datatype: 'json',
      mttype: 'post',
      colNames: ['编号', '名称', '数量', '单价','操作'],
      colModel: [
        {name: 'num', index: 'num', width: '100', align: 'center'},
        {name: 'name', index: 'name', width: '100', align: 'center'},
        {name: 'storage', index: 'storage', width: '100', align: 'center'},
        {name: 'price', index: 'price', width: '100', align: 'center'},
        {
          name: 'num', index: 'num', width: '100', align: 'center',
          formatter: function (value, options, obj) {
            return '<a style="cursor:pointer;" onclick="">选择</a>';
          }
        },
      ],
      height: 'auto',
      pager: '#tbGoodPager',
      viewrecords: true,
      rowNum: 10,
      rowList: [10, 20, 40],
      autowidth: true
    });
  });

  addCar = {
    search: function () {
      var $fmQuery = $('.fmClientQuery-hook');
      var param = ittaoli.serializeObject($fmQuery);
      $('#tbCar').jqGrid('setGridParam', {
        postData: {q: JSON.stringify(param)},
        page: 1
      }).trigger("reloadGrid");
    },
    searchNull: function () {
      $('.fmClientQuery-hook input').val('');
      var param = {};
      $('#tbCar').jqGrid('setGridParam', {
        postData: {q: JSON.stringify(param)},
        page: 1
      }).trigger("reloadGrid");
    }
  };
</script>

{include file="public/foot"/}
